<template>
	<div class="cu_table">
		<!-- :row-class-name="tableRowClassName" -->

		<el-table
			:data="tableData.data"
			border
			v-loading="tableLoading"
			style="font-size: 12px"
			:cell-style="{ padding: '8px' }"
			@cell-click="cellClick"
			@cell-dblclick="cellDblclick"
			@selection-change="selectionChange"
		>
			<slot></slot>
		</el-table>

		<el-pagination
			background
			style="float: right; margin-top: 10px; margin-right: 30px"
			layout="prev, pager, next, jumper, ->, total"
			:page-size="tableData.size"
			:total="tableData.total"
			@current-change="currentChange"
		/>
	</div>
</template>

<script setup lang="ts">
const props = defineProps({
	// 列表内容
	tableData: {
		type: Object,
		default: () => {},
	},
	tableLoading: {
		type: Boolean,
		default: false,
	},
});

const emit = defineEmits(['currentChange', 'selectionChange', 'cellDblclick', 'cellClick']);

function currentChange(page: number) {
	emit('currentChange', page);
}

function tableRowClassName({ rowIndex }: { rowIndex: any }) {
	if (rowIndex % 2 == 1) {
		return 'warning-row';
	} else {
		return 'success-row';
	}
}

function selectionChange(rows: any) {
	emit('selectionChange', rows);
}

function cellDblclick(row, column, cell, event) {
	emit('cellDblclick', {
		row,
		column,
		cell,
		event,
	});
}

function cellClick(row, column, cell, event) {
	emit('cellClick', {
		row,
		column,
		cell,
		event,
	});
}
</script>

<style scoped>
.cu_table {
	/* margin-bottom: 80px; */
}

.el-table .warning-row {
	background: #fff;
}

.el-table .success-row {
	background: #f7fbff;
}
</style>
